﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="OfficeLocationEdit.ascx.cs" Inherits="Controls_AdminControls_OfficeLocationEdit" %>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=uk"></script>
<table class="edit_content">
    <tr>
        <td colspan="2">
            <div id="map-canvas"></div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="button">
                <dx:ASPxButton ID="btnOk" runat="server" Text="Зберегти" SkinID="Blue" />
            </div>
            <div class="button">
                <dx:ASPxButton ID="btnCancel" runat="server" Text="Назад" SkinID="Red" />
            </div>
        </td>
        <td>
            <div class="map_right">
                <div class="left">
                    <asp:Literal runat="server" ID="lblCity" />
                    <br />
                    <asp:Literal runat="server" ID="lblAddress1" />
                    <br />
                    <asp:Literal runat="server" ID="lblAddress2" />
                </div>
                <div class="right">
                    тел.: <asp:Literal runat="server" ID="lblPhone1" />
                    <br />
                    <asp:Literal runat="server" ID="lblPhone2" />
                    <br />
                    <asp:Literal runat="server" ID="lblPhone3" />
                </div>
            </div>
        </td>
    </tr>
</table>
<asp:HiddenField ID="hfValues" runat="server" />
<dx:ASPxCallback ID="clbkSave" runat="server" />
<script type="text/javascript">
    var map;
    var geocoder;
    var marker;
    var model;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var mapOptions = {
            zoom: 11
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        model = JSON.parse($('#<%=hfValues.ClientID %>')[0].value);
        if (model.Lat != null) {
            var location = new google.maps.LatLng(model.Lat, model.Lng);
            map.setCenter(location);
            map.setZoom(15);
            addMarker(location);
        } else {
            setAddress(model.City);
        }
        google.maps.event.addListener(map, 'click', function (event) {
            addMarker(event.latLng);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    var setDefault = true;
    function setAddress(address) {
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
            } else {
                if (setDefault) {
                    setDefault = false;
                    setAddress('Львів Україна');
                }

            }
        });
    }

    function addMarker(location) {
        if (marker == null) {
            marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });
            marker.position_changed = function () {
                setPosition(marker.position);
            };
            setPosition(location);
        } else {
            marker.setPosition(location);
        }
    }

    function setPosition(location) {
        if (location) {
            model.Lat = location.lat();
            model.Lng = location.lng();
            $('#<%=hfValues.ClientID %>').val(JSON.stringify(model));
        }
    }
</script>
